// button组件实现
window.add_button = function(x, y, w, h, title, hide, tag, css, callback, divid) {
    // 确保参数有默认值
    x = x || 100;
    y = y || 100;
    w = w || 120;
    h = h || 40;
    title = title || '按钮';
    hide = hide || false;
    tag = tag || '';
    css = css || '';
    callback = callback || null;
    
    // 生成唯一ID
    const id = 'btn_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
    
    // 创建按钮元素
    const btn = document.createElement('button');
    btn.id = id;
    btn.className = 'layui-btn';
    btn.textContent = title;
    
    // 设置样式
    btn.style.position = 'absolute';
    btn.style.left = x + 'px';
    btn.style.top = y + 'px';
    btn.style.width = w + 'px';
    btn.style.height = h + 'px';
    
    // 附加样式和标记
    if (css) btn.style.cssText += css;
    if (tag) btn.setAttribute('data-tag', tag);
    if (hide) btn.style.display = 'none';
    
    // 事件处理
    btn.onmousemove = function(e) { handleEvent('button',id, 0, title, tag, e.clientX, e.clientY, null, callback, divid); };
    btn.onclick = function(e) { handleEvent('button',id, 1, title, tag, e.clientX, e.clientY, null, callback, divid); };
    btn.oncontextmenu = function(e) { e.preventDefault(); handleEvent('button',id, 2, title, tag, e.clientX, e.clientY, null, callback, divid); return false; };
    btn.onmouseover = function(e) { handleEvent('button',id, 5, title, tag, e.clientX, e.clientY, null, callback, divid); };
    btn.onmouseout = function(e) { handleEvent('button',id, 6, title, tag, e.clientX, e.clientY, null, callback, divid); };
    btn.onkeydown = function(e) { handleEvent('button',id, 3, title, tag, 0, 0, e.key, callback, divid); };
    btn.onkeyup = function(e) { handleEvent('button',id, 4, title, tag, 0, 0, e.key, callback, divid); };
    
    // 添加到页面或指定父div
    const parent = divid ? document.getElementById(divid) : document.body;
    parent.appendChild(btn);
    
    // 初始化buttons存储空间
    if (!elementStore.buttons) {
        elementStore.buttons = {};
    }
    
    // 存储引用
    elementStore.buttons[id] = btn;
    
    // 应用LayUI按钮样式
    btn.className = 'layui-btn';
    
    return id;
}

// 内联layui.css按钮样式
const layuiButtonStyle = document.createElement('style');
layuiButtonStyle.textContent = `
.layui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all .3s;
    -webkit-appearance: none;
}
.layui-btn:hover {
    opacity: 0.8;
    color: #fff;
}
.layui-btn:active {
    opacity: 1;
}
`;
document.head.appendChild(layuiButtonStyle);

// 统一导出函数
window.del_button = function(id) {
    if (elementStore.buttons[id]) {
        elementStore.buttons[id].remove();
        delete elementStore.buttons[id];
    }
}

window.upd_button = function(id, x, y, w, h, title, hide, tag) {
    const btn = elementStore.buttons[id];
    if (btn) {
        if (x !== undefined) btn.style.left = x + 'px';
        if (y !== undefined) btn.style.top = y + 'px';
        if (w !== undefined) btn.style.width = w + 'px';
        if (h !== undefined) btn.style.height = h + 'px';
        if (title !== undefined) btn.textContent = title;
        if (hide !== undefined) btn.style.display = hide ? 'none' : 'block';
        if (tag !== undefined) btn.setAttribute('data-tag', tag);
    }
}